<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日历时钟</title>
	</head>
	<body onload="start();">
		<div id="cald">
			<div id="1"><img src="img/cald.png" ></div>
			<span id="weekday"></span>
			<span id="datetime"></span>
		</div>
		<div id="clock">
			<spanid="img2"><img src="img/clock.png" ></span>
			<span id="timeDiv"></span>
		</div>
		
		<style>
			#weekday{
				font-size: 25px;
				position: relative;
				display: block;
				top: -140px;
				left: 30px;
			}
			#timeDiv{
				font-size: 40px;
				color: #00FFFF;
				position: relative;
				display: block;
				top: -110px;
				left: 50px;
			}
			#datetime{
				font-size: 70px;
				position: relative;
				top: -145px;
				left: 50px;
			}
		</style>
		
		<script>
			
			//179000629徐阳光
			//检查h和s是否小于10
			function check(v){
				if(v<10){
					return ("0"+v);
				}else{
					return v;
				}
			}
			//时钟
			function showtime(){
				var mytime = new Date();
				var day = mytime.getDay();//获取星期
				var date = mytime.getDate();//获取日期
				var week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
				var weekday = week[day];
				var h = mytime.getHours();//获取小时
				var m = mytime.getMinutes();//获取分钟
				var s = mytime.getSeconds();//获取秒
				var str1 = weekday;//星期
				var str2 = date;//日期
				var str3 = `${check(h)}:${check(m)}:${check(s)}`;//时间
				document.querySelector("#timeDiv").innerHTML = str3;
				document.querySelector("#weekday").innerHTML = str1;
				document.querySelector("#datetime").innerHTML = str2;
			}
			//每秒调用一次
			function start(){
				window.setInterval("showtime()",1000);
			}
			
		</script>
	</body>
</html>
